/**
 * Created by YJH on 2018/5/24.
 */
import React, {Component, PropTypes} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    StatusBar,
} from 'react-native';

const NAVIGATION_BAR_HEIGHT_ANDROID = 40;
const NAVIGATION_BAR_HEIGHT_IOS = 44;
const STATUS_BAR_HEIGHT = 20;
const StatusBarShape = {
    backgroundColor: PropTypes.string,
    barStyle: PropTypes.oneOf(['default', 'light-content', 'dark-content']),
    hidden: PropTypes.bool,
};

export default class NavigationBarComponent extends Component {

    static propTypes = {
        style: View.propTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        hide: PropTypes.bool,
        leftButton: PropTypes.element,
        rightButton: PropTypes.element,
        statusBar: PropTypes.shape(StatusBarShape),
    }

    static defaultProps = {
        statusBar: {
            barStyle: 'light-content',
            hidden: false
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            hide: false,
        }
    }


    render() {
        let status = <View style={[styles.statusBar, this.props.statusBar]}>
            <StatusBar {...this.props.statusBar}/>
        </View>;
        let titleView = this.props.titleView ? this.props.titleView :
            <Text ellipsizeMode='tail' numberOfLines={1} style={styles.title}>{this.props.title}</Text>
        let content = <View style={styles.navBar}>
            {this.props.leftButton}
            <View style={styles.titleContainer}>
                {titleView}
            </View>
            {this.props.rightButton}
        </View>;
        return (
            <View style={[styles.container, this.props.style]}>
                {status}
                {content}
            </View>
        )
    }
}

const styles = StyleSheet.create(
    {
        container: {
            backgroundColor: 'gray',
        },

        navBar: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            height: Platform.OS == 'ios' ? NAVIGATION_BAR_HEIGHT_IOS : NAVIGATION_BAR_HEIGHT_ANDROID,

        },
        titleContainer: {
            alignItems: 'center',
            justifyContent: 'center',
            position: 'absolute',
            left: 40,
            top: 0,
            right: 40,
            bottom: 0,
        },
        title: {
            fontSize: 18,
            color:'white',

        },
        statusBar: {
            height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,
        }
    }
);